import styled from "@emotion/styled"
import { Form, Input, Button } from "antd"
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import useLoginModel from "../../model/useLoginModel";

const PasswordLogin: React.FC = () => {

    const user = useLoginModel()

    return <Form
        name="password_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={params => user.passwordLogin(params)}
    >
        <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
        >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
        >
            <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
            />
        </Form.Item>
        <Form.Item>
            <LoginButton type="primary" htmlType="submit" className="login-form-button">
                登录
            </LoginButton>
        </Form.Item>
    </Form>
}

const LoginButton = styled(Button)`
    width: 100%;
`

export default PasswordLogin

